import React, { Component } from 'react'
import { View,Text,StyleSheet,Image,TouchableHighlight,TouchableOpacity } from 'react-native'
import { ActionSheet } from 'antd-mobile-rn'

class UserInfo extends Component {

    state = {
        avator:'',
        name:'Kennen',
        sex:1,  //1.男，2.女,
        desc:'我的世界我做主'
    }

    //选择头像
    showAvatarPick = () =>{
        const ops = {
            title:'更换头像',
            options:['拍照', '相册中选择', '取消'],
            cancelButtonIndex:2
        }
        ActionSheet.showActionSheetWithOptions(ops, (btnIndex)=>{
            if (btnIndex == 0) {
                console.log('摄像头拍照')
            } else if (btnIndex == 1) {
                console.log('相册中选择')
            }
        })
    }

    //性别选择
    showSexChoose=()=>{
        console.log('sex choose')
        const ops = {
            title:'选择性别',
            options:[
                <Text style={styles.actionSheetItem}><Image source={require('../imgs/men.png')} style={{width:25, height:25}} /><Text>男</Text></Text>, 
                <Text style={styles.actionSheetItem}><Image source={require('../imgs/women.png')} style={{width:25, height:25}} /><Text>女</Text></Text>, 
                '取消'
            ],
            cancelButtonIndex:2
        }
        ActionSheet.showActionSheetWithOptions(ops, (btnIndex)=>{
            if (btnIndex == 0) {
                this.setState({sex:1})
            }
            if (btnIndex == 1) {
                this.setState({sex:2})
            }
        })
    }

    render() {
        return (
            <View style={styles.userinfo}>

                <View style={styles.header}>
                    <View style={styles.backview}>
                        <Image source={require('../imgs/left.png')} style={{width:15,height:15}} />
                        <Text style={styles.back}>返回</Text>
                    </View>
                    <Text style={styles.headerText}>用户信息</Text>
                </View>

                <TouchableHighlight onPress={this.showAvatarPick} underlayColor="rgba(0,0,0,0.2)">
                <View style={styles.avtarbox}>
                    <Text style={styles.label}>头像</Text>
                    <View style={styles.desc}>
                            <Image source={require('../imgs/avtar.png')} style={{width:61,height:61}} />
                        <Image source={require('../imgs/right.png')} style={{width:15,height:15}} />
                    </View>
                </View>
                </TouchableHighlight>

                <View style={styles.avtarbox}>
                    <Text style={styles.label}>姓名</Text>
                    <View style={styles.desc}>
                        <Text>Kennen</Text>
                        <Image source={require('../imgs/right.png')} style={{width:15,height:15}} />
                    </View>
                </View>

                <TouchableHighlight onPress={this.showSexChoose} underlayColor="rgba(0,0,0,0.2)">
                <View style={styles.avtarbox}>
                    <Text style={styles.label} onPress={()=>{this.setState({sex:2})}}>性别</Text>
                    <View style={styles.desc}>
                        <Image source={this.state.sex==1 ? require(`../imgs/men.png`) : require(`../imgs/women.png`)} style={{width:20,height:20}} />
                        <Text>{this.state.sex==1?'男':'女'}</Text>
                        <Image source={require('../imgs/right.png')} style={{width:15,height:15}} />
                    </View>
                </View>
                </TouchableHighlight>

                <View style={styles.avtarbox}>
                    <Text style={styles.label}>个性签名</Text>
                    <View style={styles.desc}>
                        <Text>我的世界我做主</Text>
                        <Image source={require('../imgs/right.png')} style={{width:15,height:15}} />
                    </View>
                </View>

            </View>
        )

    }
}

const styles = StyleSheet.create({
    userinfo : {
        backgroundColor: '#fff',
        height: '100%'
    },
    header : {
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems: 'center',
        paddingLeft: 5,
        paddingRight:5,
        backgroundColor: '#C63636',
        height:50
    },
    backview:{
        flexDirection: 'row',
        alignItems:'center',
    },
    back:{
        color: '#fff',
        fontWeight:'200',
        fontSize:14,
    },
    headerText:{
        fontSize:17,
        fontWeight:'bold',
        color: '#fff',
        flex:1,
        textAlign: 'center'
    },
    avtarbox:{
        marginTop:10,
        marginLeft:10,
        marginRight: 10,
        paddingBottom: 10,
        flexDirection: 'row',
        justifyContent:"space-between",
        alignItems: "center",
        borderBottomWidth: 1,
        borderColor: '#f5f5f5'
    },
    desc:{
        flexDirection:"row",
        justifyContent:"space-between",
        alignItems:"center"
    },
    label : {
        color: '#333'
    },
    actionSheetItem:{
        flexDirection: 'row',
        justifyContent: "space-around",
        alignItems:"center"
    }
})

export default UserInfo